<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
<div class="container mx-auto max-w-screen-xl mt-5">
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    
    <!-- 左侧主内容区域 -->
    <div class="lg:col-span-3">
      <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 p-6">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">主要内容</h2>
        <p class="text-gray-600 dark:text-gray-400">这里是主要内容区域...</p>
      </div>
    </div>

    <!-- 右边栏 -->
    <div class="lg:col-span-1">
      <div class="sticky top-21">
        <!-- 用户信息卡片 -->
        <UserInfoCard></UserInfoCard>
        
        <!-- 分类区域 -->
        <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
          <div class="p-5">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">分类</h3>
            <div class="flex items-center text-gray-600 hover:text-blue-600 cursor-pointer transition-colors">
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
              </svg>
              <span>aa</span>
            </div>
          </div>
        </div>
        
        <!-- 标签区域 -->
        <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
          <div class="p-5">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">标签</h3>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
                wda
              </span>
              <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
                feafea
              </span>
              <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
                hdwaud
              </span>
              <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full hover:bg-green-200 cursor-pointer transition-colors">
                dwadjw
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.header-banner {
  min-height: 160px;
}
</style> 